﻿<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="Insert Items I" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <div>
        This demo demonstrates how to add 3 new items to the repeater control using the insertItems method. 
        To see the demo, click the link at the bottom of the screen.
    </div>    
    <AjaxData:Repeater ID="Repeater1"  AutoCreateScriptVariable="true" runat="server" ItemDataBoundEvent="onItemDataBound">
        <HeaderTemplate>
            <h3>Supplier Information</h3>
        </HeaderTemplate>
        <ItemTemplate>
            <table border="0" id="{{ Eval(ID) }}">
                <tr>
                    <td><strong>Contact:</strong> </td>
                    <td colspan="3">{{ Eval(ContactName) }}&nbsp;({{ Eval (ContactTitle) }})</td>
                </tr>
                <tr>
                    <td colspan="4">{{ Eval(Address) }}</td>
                </tr>
                <tr>
                    <td colspan="2">{{ Eval(City) }}&nbsp;{{ Eval(Region) }}&nbsp;{{ Eval(PostalCode) }}</td>
                </tr>
                <tr>
                    <td colspan="4">{{ Eval(Country) }}</td>
                </tr>
                <tr>
                    <td>
                        <strong>Phone:</strong>
                    </td>
                    <td>
                        {{ Eval(Phone) }}
                    </td>
                    <td>
                        <strong>Fax:</strong>
                    </td>
                    <td>
                        {{ Eval(Fax) }}
                    </td>
                </tr>
            </table>
        </ItemTemplate>
        <SeparatorTemplate>
            <hr />
        </SeparatorTemplate>
        
    </AjaxData:Repeater>
    
    <div>
        <a href='javascript:void(0);' onclick="insertItem();">Insert New Items</a>
    </div>
    
    <script type="text/javascript">

        var _repeater;
        var _id1;
        var _id2;
        
        function pageLoad(sender, e)
        {
            _repeater = Repeater1;
            DataService.GetTopTenSupplier(onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            _repeater.set_dataSource(result);
            _repeater.dataBind();
        }
        
        function insertItem()
        {
            _id1 = Math.floor(Math.random() * 9999);
            _id2 = Math.floor(Math.random() * 9999);
            
            var data = new Array();
            data[0] = { ID: _id1, Company: "DotNetSlackers", ContactTitle: "Mr.", ContactName: "Sonu Kapoor", Address: "...", City: "Montreal", Region: "N/A", PostalCode: "N/A", Country: "USA", Phone: "N/A", Fax: "N/A" };
            data[1] = { ID: _id2, Company: "DotNetSlackers", ContactTitle: "Mr.", ContactName: "Xun Ding", Address: "...", City: "Chicago", Region: "N/A", PostalCode: "N/A", Country: "USA", Phone: "N/A", Fax: "N/A" };
            _repeater.insertItems(data);
        }
        
        function onItemDataBound(sender, e)
        {
            var item = e.get_item();
            if (item.get_isDataItemType())
            {
                var dataItem = item.get_dataItem();
                if (typeof _id1 != "undefined" && typeof _id2 != "undefined")
                {
                    var searchForId;
                    if(dataItem.ID == _id1)
                    {
                        searchForId = _id1;
                    }
                    
                    if(dataItem.ID == _id2)
                    {
                        searchForId = _id2;
                    }
                    
                    if (searchForId != null)
                    {
                        var element = item.findControl(new String(searchForId));
                        element.id = searchForId; // change id, because jquery doesnt seem to like the $ created variable names
                        
                        $("#" + searchForId).effect("pulsate", { times: 3 }, 500);
                    }
                }
            }
        }
    </script>
</asp:Content>

